<template>
  <div
    style="display:flex;align-items:center;width: 100%; height: 80px;line-height: 80px; background:rgba(255,255,255,1); overflow: hidden; vertical-align:middle; min-width: 1100px;">
    <div
      style="position: fixed;display:flex;align-items:center;z-index: 9999;width: 100%;background:rgba(255,255,255,1);box-shadow: 0px 0px 10px 0px;overflow: hidden;">
      <router-link to="/" style="width:20%; height:80px;">
        <div id="logo" style="line-height: 80px;width:20%;"><img alt="Vue logo" src="../assets/logo2.jpg" width="180px"
            height="80px" style="font-size: 0;margin-left: 20px;" /></div>

      </router-link>
      <div style="width:39%; height:80px; vertical-align: middle;">
        <div style="float:right">
          <el-input type="text" placeholder="搜索路线" v-model="input"
            style="width:300px;vertical-align: middle; border-radius: 50px!important;"
            @keyup.enter.native="submitResult">
            <a slot="suffix" class="el-input__icon el-icon-search" @click="submitResult"></a>
          </el-input>
        </div>
      </div>
      <el-menu router class="el-menu-demo" mode="horizontal" @select="handleSelect" style="vertical-align: middle; height: 80px;
  line-height:80px;
  overflow: hidden;
	top: 0;
  width: 40%;
	">
        <el-submenu index="2" style="vertical-align: middle;height: 80px;float:right;">
          <template slot="title">
            <el-avatar :size="60" @error="errorHandler" style="line-height :80px;vertical-align: middle;">
              <img :src="image" style="vertical-align: middle!important;" />
            </el-avatar>
          </template>
          <el-menu-item index="2-1" :route="{ path: '/login' }" v-if="!submitted">登录/注册</el-menu-item>
          <el-menu-item index="2-2" :route="{ path: '/user', query: { id: id } }" v-if="submitted">个人空间</el-menu-item>
          <el-menu-item index="2-3" :route="{ path: '/manager' }" v-if="submitted && isAdmin">后台管理</el-menu-item>
          <el-menu-item index="2-4" :route="{ path: '/' }" v-if="submitted" @click="logout">退出登录</el-menu-item>
        </el-submenu>
        <div style="display:inline-block; vertical-align:middle;float:right;">
          <el-button type="primary" round style="vertical-align: middle;" @click="createRoute">
            <a-icon type="edit" style="color:white;" />创作路线
          </el-button>
        </div>
        <el-menu-item index="1"
          style="vertical-align: middle; line-height: 80px;height: 80px; font-size: larger;float:right;"
          :route="{ path: '/about' }">
          <b><i class="el-icon-question"></i>关于我们</b>
        </el-menu-item>

      </el-menu>
    </div>
  </div>
</template>
 
<script>
// import AvatarBlock from './MainHeader/AvatarBlock.vue'
import { Message } from 'element-ui'
export default {
  components: {
    // AvatarBlock
  },
  data() {
    return {
      input: this.$route.query.keyword || '',
    }
  },
  computed: {
    submitted() {
      return this.$store.state.isLogin
    },
    id() {
      return this.$store.state.userInfo.id
    },
    isAdmin() {
      return this.$store.state.userInfo.admin
    },
    image() {
      if (this.$store.state.isLogin) {
        return (
          this.$store.state.userInfo.avatar ||
          'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        )
      } else {
        return 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      }
    },
  },
  methods: {
    logout() {
      this.$store.commit('logout')
    },
    submitResult() {
      if (this.input === '') {
        Message({
          message: '请输入搜索内容',
          type: 'warning',
          customClass: 'search-error-message'
        })
      } else {
        this.$router.push({
          path: '/search/routes',
          query: { keyword: this.input },
        })
      }
    },
    handleSelect() { },
    errorHandler() { },
    activeIndex() { },
    createRoute() {
      if (this.$store.state.isLogin === true) {
        this.$router.push({
          path: '/editor',
        })
      } else {
        this.$router.push({
          path: '/login',
        })
      }
    },
  },
}
</script>

<style scoped>
.search {
  position: relative;
  width: 400px;
  display: inline-block;
  vertical-align: middle;
  height: 90px;
  top: 0px;
  padding-top: 20px;
  left: 200px;
}

.el-form-item {
  width: 444px;
}

.el-form {
  display: inline-block;
}

:deep .el-input {
  vertical-align: middle;
}

:deep .el-submenu__title {
  display: inline-block;
}

:deep .el-input__inner {
  border-radius: 20px;
}
</style>